<template>
	<view>
		<view class="top-image" v-if="model && model.carPhotoList && model.carPhotoList.length>0">
			<image :src="model.carPhotoList[0]" mode="scaleToFill" style="width: 100%;height: 100%;"></image>

			<view class="top-image-bg">
				<u-icon name="photo-fill" size="18" color="#fff"></u-icon>
				<text style="margin-left: 6rpx;color: #fff;font-size: 22rpx;"
					@click="showBigImg">{{model.carPhotoList.length}}张</text>
			</view>

		</view>

		<view class="content" :style="{'top':topValue}">
			<view class="car-info">
				<view style="display: flex;align-items: center;margin: 30rpx;justify-content: space-between;">
					
					<view style="display: flex;align-items: center;">
						<text class="car-no">{{model.carBasicDetilPO.carNo|filterNull}}</text>
						
						<u-icon v-if="model.editButton" name="edit-pen-fill" color="#fff" @click="goEdit" size="18"></u-icon>
						
					</view>

					<text
						style="font-size: 28rpx;color: #fff;">{{model.carBasicDetilPO.businessTypeStr|filterNull}}</text>
				</view>

				<text
					style="margin: 30rpx;font-size: 28rpx;color: #fff;">{{model.carBasicDetilPO.brandSeriesModelName|filterNull}}</text>

			</view>

			<view class="item" style="margin: 20rpx 0 0;">

				<view style="display: inline-flex; height: 80rpx; justify-content: space-between; margin: 0 20rpx;">
					<u-icon name="order" color="#1573FF" label="业务信息" label-color="#333333" style="line-height: 80rpx;">
					</u-icon>

				</view>

				<u-line color="#efefef" style="margin-bottom: 10rpx;display: block;"></u-line>

				<view class="gride-content">

					<view class="gride-item" v-for="(gitem, gindex) in model.carBasicBusinessInforList" :key="gindex"
						@click="itemClick(gitem)">
						<text style="font-size: 24rpx;color: #808080;">
							{{gitem.businessName}}
						</text>
						<text style="font-size: 28rpx;color: #333;font-weight: bold;margin-top: 20rpx;">
							{{gitem.businessCount}}
						</text>

						<view class="dot" v-if="0==gitem.isRead">
						</view>
					</view>

				</view>

			</view>

			<view class="item" style="margin: 20rpx 0 20rpx;">

				<view style="display: inline-flex; height: 80rpx; justify-content: space-between; margin: 0 20rpx;">
					<u-icon name="order" color="#1573FF" label="车辆基础信息" label-color="#333333"
						style="line-height: 80rpx;">
					</u-icon>

				</view>

				<u-line color="#efefef" style="margin-bottom: 30rpx;display: block;"></u-line>

				<view>
					<view class="text-line" style="margin-top: 20rpx;">
						<text class="text-name">车架号:</text>
						<text class="text-value">{{model.carBasicDetilPO.vinNo|filterNull}}</text>
					</view>

					<view class="text-line">
						<text class="text-name">发动机号:</text>
						<text class="text-value">{{model.carBasicDetilPO.engineNo|filterNull}}</text>
					</view>

					<view class="text-line">
						<text class="text-name">GPS设备号:</text>
						<text class="text-value">{{model.carBasicDetilPO.gpsDeviceNo|filterNull}}</text>
					</view>

					<view class="text-line">
						<text class="text-name">车辆采购初始里程数:</text>
						<text class="text-value">{{model.carBasicDetilPO.meligile|filterNull}}km</text>
					</view>

					<view class="text-line">
						<text class="text-name">车辆实时里程数:</text>
						<text class="text-value">{{model.carBasicDetilPO.sumOdograph|filterNull}}km</text>
					</view>

					<view class="text-line">
						<text class="text-name">车辆颜色:</text>
						<text class="text-value">{{model.carBasicDetilPO.carColor|filterNull}}</text>
					</view>

					<view class="text-line">
						<text class="text-name">车辆归属:</text>
						<text class="text-value">{{model.carBasicDetilPO.deptName|filterNull}}</text>
					</view>

					<view class="text-line">
						<text class="text-name">车辆仓库:</text>
						<text class="text-value">{{model.carBasicDetilPO.depotName|filterNull}}</text>
					</view>

					<view class="text-line">
						<text class="text-name">供应商:</text>
						<text class="text-value">{{model.carBasicDetilPO.purchaseSupplierName|filterNull}}</text>
					</view>

					<view class="text-line">
						<text class="text-name">入库时间:</text>
						<text class="text-value">{{model.carBasicDetilPO.storageTime|filterNull}}</text>
					</view>

					<view class="text-line">
						<text class="text-name">车辆备注:</text>
						<text class="text-value">{{model.carBasicDetilPO.remark|filterNull}}</text>
					</view>

					<view class="text-line">
						<text class="text-name">随车物品名称:</text>
						<text class="text-value">{{model.carBasicDetilPO.accessoryItemsName|filterNull}}</text>
					</view>

					<view class="text-line">
						<text class="text-name">纠纷原因:</text>
						<text class="text-value">{{model.carBasicDetilPO.disputeReason|filterNull}}</text>
					</view>
					<view class="text-line" v-if="model.carBasicDetilPO.imgDrivinglicenseFront">
						<text class="text-name">行驶证正面: </text>
						<view style="margin-left:10rpx;">
							<u-album :urls="imgDrivinglicenseFront"  singleSize="100" ></u-album>
						</view>
					</view>
					<view class="text-line" v-if="model.carBasicDetilPO.imgDrivinglicenseBack">
						<text class="text-name">行驶证反面: </text>
						<view style="margin-left:10rpx;">
							<u-album :urls="imgDrivinglicenseBack"  singleSize="100" ></u-album>
						</view>
						
					</view>
				</view>

			</view>




		</view>


	</view>
</template>

<script>
	import config from '../../common/config.js'
	export default {
		data() {
			return {
				id: '',
				model: {
					carPhotoList: [],
					carBasicDetilPO: {

					},
					carBasicBusinessInforList: [],
				},
				imgDrivinglicenseFront:null,
				imgDrivinglicenseBack:null,
			}
		},
		computed: {
			topValue() {
				if (uni.$u.test.isEmpty(this.model.carPhotoList)) {
					return '0'
				} else {
					return this.model.carPhotoList.length > 0 ? '-80rpx' : '0'
				}

			}
		},
		methods: {
			getData() {
				this.$u.api.carInforDetails({
					carId: this.id
				}).then(res => {
					this.model = res;

					if (!uni.$u.test.isEmpty(this.model.carPhotoList)) {
						this.model.carPhotoList = this.model.carPhotoList.map(item => {
							item = this.baseImgUrl() + item;
							return item;
						})
					}
					if(res.carBasicDetilPO.imgDrivinglicenseFront){
						this.imgDrivinglicenseFront = [this.baseImgUrl() + res.carBasicDetilPO.imgDrivinglicenseFront]
					}
					if(res.carBasicDetilPO.imgDrivinglicenseBack){
						this.imgDrivinglicenseBack = [this.baseImgUrl() + res.carBasicDetilPO.imgDrivinglicenseFront]
					}
				})
			},

			showBigImg() {
				uni.previewImage({
					urls: this.model.carPhotoList,
					current: 0
				})
			},

			itemClick(item) {
				switch (item.bussinessType) {
					case 1: //车辆违章
						uni.navigateTo({
							url: '/pages/illegal/illegaldetail?carNo=' + this.model.carBasicDetilPO.carNo +
								"&carCode=" + this.model.carBasicDetilPO.carId + '&from=fromcar',
						})
						break;
					case 2: //保险信息
						uni.navigateTo({
							url: '/pages/renewal/renewaldetail?id=' + this.model.carBasicDetilPO.carId +
								"&componentId=" + item.componentId + '&pageType=fromcar',
						})
						break;
					case 3: //保养信息
						uni.navigateTo({
							url: '/pages/maintain/maintaindetail?carId=' + this.model.carBasicDetilPO.carId +
								"&maintenanceId=" + item.componentId + '&pageType=fromcar',
						})
						break;
					case 4: //年检信息
						uni.navigateTo({
							url: '/pages/yearcheck/yearcheckdetail?carId=' + this.model.carBasicDetilPO.carId +
								"&inspectionId=" + item.componentId + '&pageType=fromcar',
						})
						break;
					case 5: //维修
						uni.navigateTo({
							// url:'./car-addReapir?vehicle=' + vehicle,
							url: '/pages/car/repair/car-repairDetail?carId=' + this.model.carBasicDetilPO.carId +
								'&pageType=fromcar',
						})
						break;
					case 6: //车辆订单
						uni.navigateTo({
							url: '/pagesB/order/orderlist-member?carId=' + this.model.carBasicDetilPO.carId +
								'&pageType=fromcar&type=car'
						})
						break;
					case 7: //车辆档案
						uni.navigateTo({
							url: '/pagesA/profile/car-profile?carCode=' + this.model.carBasicDetilPO.carCode,
						})
						break;
					case 8: //  收车记录
						uni.navigateTo({
							url: '/pagesA/collect-car/collect-list?carId=' + this.model.carBasicDetilPO.carId +
								'&pageType=fromcar',
						})
						break;
					case 9: //过户资料
						uni.navigateTo({
							url: '/pagesA/assign/assign?carId=' + this.model.carBasicDetilPO.carId +
								'&pageType=fromcar',
						})
						break;
					case 10: //处置信息
						uni.navigateTo({
							url: '/pagesA/disposal/disposaldetail?carId=' + this.model.carBasicDetilPO.carId +
								'&pageType=fromcar',
						})
						break;
					case 13: //出险信息
						uni.navigateTo({
							url: '/pages/car/outdanger/car-outdangerDetail?carId=' + this.model.carBasicDetilPO
								.carId + '&pageType=fromcar',
						})
						break;
					case 11: //车源合同（暂缓）
					case 12: //车源订单 （暂缓）
					case 14: //车辆监控（无）
						break;
				}
			},
			
			goEdit(){
				uni.navigateTo({
					url: '/pagesA/cardetail/edit-car?id=' + this.model.carBasicDetilPO
						.carId + '&carstate='+this.model.carBasicDetilPO.businessTypeStr,
				})
			}
			
		},
		onLoad(op) {
			this.id = op.id;
		},
		onShow() {
			this.getData();
		}

	}
</script>

<style lang="scss" scoped>
	.top-image {
		width: 100%;
		height: 400rpx;
		position: relative;
	}

	.top-image-bg {
		right: 36rpx;
		bottom: 82rpx;
		position: absolute;
		width: auto;
		height: 40rpx;
		background-color: #919191;
		border-radius: 90rpx;
		padding: 0 15rpx;
		display: flex;
		align-items: center;
	}

	.content {
		position: relative;
		display: flex;
		margin: 0 24rpx;
		flex-direction: column;
	}

	.car-info {
		margin-top: 20rpx;
		border-radius: 16rpx;
		height: 200rpx;
		background: linear-gradient(to right, #2464FF, #5765F9);
	}

	.car-no {
		border: #fff solid 4rpx;
		padding: 5rpx 10rpx;
		color: #fff;
		margin-right: 10rpx;
		font-size: 28rpx;
	}

	.gride-content {
		display: flex;
		flex-wrap: wrap;
	}

	.gride-item {
		width: 150rpx;
		height: 120rpx;
		margin: 20rpx 0 0 20rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #f5f5f5;
		border-radius: 16rpx;
	}

	.dot {
		width: 10rpx;
		height: 10rpx;
		background-color: #E93131;
		border-radius: 90rpx;
		position: absolute;
		top: 10rpx;
		right: 10rpx;
	}
</style>
